<template>
    <div class="body">
        <div class="scrollDist"></div>
        <main>
            <svg viewBox="0 0 1200 800" xmlns="http://www.w3.org/2000/svg">
                <mask id="m">
                    <g class="cloud1">
                        <rect fill="#fff" width="100%" height="801" y="799" />
                        <image xlink:href="https://assets.codepen.io/721952/cloud1Mask.jpg" width="1200" height="800" />
                    </g>
                </mask>
                <image class="sky" xlink:href="https://assets.codepen.io/721952/sky.jpg" width="1200" height="590" />
                <image class="mountBg" xlink:href="https://assets.codepen.io/721952/mountBg.png" width="1200"
                    height="800" />
                <image class="mountMg" xlink:href="https://assets.codepen.io/721952/mountMg.png" width="1200"
                    height="800" />
                <image class="cloud2" xlink:href="https://assets.codepen.io/721952/cloud2.png" width="1200"
                    height="800" />
                <image class="mountFg" xlink:href="https://assets.codepen.io/721952/mountFg.png" width="1200"
                    height="800" />
                <image class="cloud1" xlink:href="https://assets.codepen.io/721952/cloud1.png" width="1200"
                    height="800" />
                <image class="cloud3" xlink:href="https://assets.codepen.io/721952/cloud3.png" width="1200"
                    height="800" />
                <text fill="#fff" x="350" y="200">EXPLORE</text>
                <polyline class="arrow" fill="#fff"
                    points="599,250 599,289 590,279 590,282 600,292 610,282 610,279 601,289 601,250" />

                <g mask="url(#m)">
                    <rect fill="#fff" width="100%" height="100%" />
                    <text x="350" y="200" fill="#162a43">FURTHER</text>
                </g>

                <rect id="arrow-btn" width="100" height="100" opacity="0" x="550" y="220" style="cursor: pointer" />
            </svg>
        </main>
    </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

onMounted(() => {
    gsap
        .timeline({
            scrollTrigger: {
                trigger: ".scrollDist",
                start: "0 0",
                end: "100% 100%",
                scrub: 1,
            },
        })
        .fromTo(".sky", { y: 0 }, { y: -200 }, 0)
        .fromTo(".cloud1", { y: 100 }, { y: -800 }, 0)
        .fromTo(".cloud2", { y: -150 }, { y: -500 }, 0)
        .fromTo(".cloud3", { y: -50 }, { y: -650 }, 0)
        .fromTo(".mountBg", { y: -10 }, { y: -100 }, 0)
        .fromTo(".mountMg", { y: -30 }, { y: -250 }, 0)
        .fromTo(".mountFg", { y: -50 }, { y: -600 }, 0);

    const arrowBtn: HTMLDivElement | null = document.querySelector("#arrow-btn");
    arrowBtn?.addEventListener("mouseenter", () => {
        gsap.to(".arrow", {
            y: 10,
            duration: 0.8,
            ease: "back.inOut(3)",
            overwrite: "auto",
        });
    });

    arrowBtn?.addEventListener("mouseleave", () => {
        gsap.to(".arrow", {
            y: 0,
            duration: 0.5,
            ease: "power3.out",
            overwrite: "auto",
        });
    });

    arrowBtn?.addEventListener("click", () => {
        gsap.to(window, {
            scrollTo: innerHeight,
            duration: 1.5,
            ease: "power1.inOut",
        });
    });
});
</script>

<style lang="scss" scoped>
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap");

.body {
    width: 100%;
    height: 100%;
    background: #111b29;
    font-family: "Montserrat", sans-serif;
    font-size: 99px;
    text-align: center;
}

div {
    position: absolute;
}

main {
    position: fixed;
    background: #fff;
    width: 100%;
    height: 100%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.scrollDist {
    width: 100%;
    height: 200%;
}
</style>
